<template>
	<view class="skeleton_box">
		<u-skeleton 
		class="skeleton" 
		loading
		titleWidth="90vw" 
		titleHeight="80" 
		:rowsHeight="rowsHeightList"
		:rowsWidth="rowsWidthList" 
		rows="3"></u-skeleton>
		<view class="ckeleton_content">
			<u-skeleton
			class="skeleton" 
			loading
			titleWidth="45vw"
			titleHeight="80" 
			rowsHeight="80"
			rowsWidth="45vw" 
			rows="10"></u-skeleton>
			<u-skeleton
			class="skeleton" 
			loading
			titleWidth="45vw"
			titleHeight="80" 
			rowsHeight="80"
			rowsWidth="45vw" 
			rows="10"></u-skeleton>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			rowsHeightList(){
				return [320,120]
			},
			rowsWidthList(){
				return ["90vw","30vw"]
			}
		}
	}
</script>

<style lang="scss">
	.skeleton_box {
		width: 100%;
		height: 95vh;
		box-sizing: border-box;
		padding: 30rpx 5%;
		overflow: hidden;	
	}

	.skeleton {
		width: 100%;
	}
	
	.ckeleton_content{
		display: flex;
		position: relative;
		& > * {
			box-sizing: border-box;
			overflow: hidden;
		}
		& *:nth-child(1){
			margin-right: 20rpx;
		}
		& *:nth-child(2){
			margin-left: 20rpx;
		}
	}
</style>
